<!-- subpkg_consult/description/index.vue -->
<script>
  export default { name: 'SubpkgConsultDescriptionIndexPage' }
</script>

<script setup>
  // 单词：dep 部门, consult 问诊, illness 疾病, patient 患者

  import { computed, ref } from 'vue'
  import useConsultStore from '@/stores/consult'

  const props = defineProps({
    type: String,
    illnessType: String,
    depId: String,
  })

  const consultStore = useConsultStore()

  if (consultStore.illnessInfo.illnessDesc) {
    uni
      .showModal({
        title: '温馨提示',
        content: '是否回复之前填写的病情信息？',
        confirmColor: '#6abfa5',
      })
      .then(({ cancel }) => {
        if (cancel) {
          consultStore.clearIllnessInfo()
        } else {
          form.value.data = consultStore.illnessInfo
        }
      })
  }

  // 表单信息
  const form = ref({
    // 表单数据
    data: {
      illnessDesc: '', // 病情描述
      illnessTime: 1, // 患病时长
      consultFlag: 0, // 是否就诊过
      pictures: [], // 病情相关图片 [ { id, url } ]
    },
    // 表单校验规则
    // rules: {}
  })

  // 给后端接口用的表单数据
  // const formData = computed(() => {
  //   const pictures = form.value.data.pictures.map((v) => ({
  //     id: v.uuid || v.id,
  //     url: v.url,
  //   }))

  //   return {
  //     ...form.value.data,
  //     pictures,
  //   }
  // })

  // 患病时长-可选项
  const illnessTimeOptions = [
    { value: 1, text: '一周内' },
    { value: 2, text: '一月内' },
    { value: 3, text: '半年内' },
    { value: 4, text: '半年以上' },
  ]

  // 是否就诊过-可选项
  const consultFlagOptions = [
    { value: 0, text: '没有就诊过' },
    { value: 1, text: '就诊过' },
  ]

  const goNextStep = () => {
    // 存储到 Pinia 中
    consultStore.setIllnessInfo(form.value.data)

    consultStore.setType(props.type)
    consultStore.setIllnessType(props.illnessType)
    consultStore.setDepId(props.depId)

    // 跳转到选择患者页面

    uni.navigateTo({
      url: '/subpkg_consult/patient/index',
    })
  }
</script>

<template>
  <scroll-page>
    <view class="description-page">
      <!-- 在线医生 -->
      <view class="doctor-online">
        <image
          src="/static/uploads/doctor-avatar-2.png"
          class="doctor-avatar"
        />
        <view class="doctor-info">
          <view class="name">在线医生</view>
          <view class="message">
            请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
          </view>
          <view class="tips">
            <text class="iconfont icon-shield"></text>
            内容仅医生可见
          </view>
        </view>
      </view>
      <!-- 患者信息 -->
      <view class="patient-info">
        <view class="description">
          <uni-easyinput
            v-model.trim="form.data.illnessDesc"
            type="textarea"
            :styles="{ backgroundColor: '#f6f6f6' }"
            :input-border="false"
            placeholder-style="font-size: 30rpx; color: #979797"
            placeholder="请详细描述您的病情,病情描述不能为空"
          />
        </view>

        <view class="title">本次患病多久了？</view>
        <view class="tags">
          <text
            v-for="v of illnessTimeOptions"
            :key="v.value"
            class="tag"
            :class="{ active: v.value === form.data.illnessTime }"
            @click="form.data.illnessTime = v.value"
            >{{ v.text }}</text
          >
        </view>

        <view class="title">此次病情是否去医院就诊过？</view>
        <view class="tags">
          <text
            v-for="v of consultFlagOptions"
            :key="v.value"
            class="tag"
            :class="{ active: v.value === form.data.consultFlag }"
            @click="form.data.consultFlag = v.value"
            >{{ v.text }}</text
          >
        </view>
      </view>
      <!-- 上传图片 -->
      <view class="patient-picture">
        <uni-file-picker
          v-model="form.data.pictures"
          title="上传病情相关图片 (仅医生可见)"
          limit="8"
          :image-styles="{ width: '160rpx', height: '160rpx' }"
          file-extname="png,jpg,gif,webp"
        />
      </view>
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <button
        class="uni-button"
        :disabled="form.data.illnessDesc === ''"
        @click="goNextStep"
      >
        下一步
      </button>
    </view>
  </scroll-page>
</template>

<style lang="scss">
  // subpkg_consult/description/index.scss
  .description-page {
    padding: 30rpx 30px 200rpx;
  }

  .doctor-online {
    display: flex;
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid #ededed;

    .doctor-avatar {
      width: 110rpx;
      height: 110rpx;
    }

    .doctor-info {
      flex: 1;
      margin-left: 20rpx;
    }

    .name {
      line-height: 1;
      padding-left: 20rpx;
      font-size: 32rpx;
      color: #121826;
    }

    .message {
      line-height: 1.5;
      padding: 20rpx;
      margin: 20rpx 0;
      color: #6f6f6f;
      font-size: 26rpx;
      border-radius: 20rpx;
      background-color: #f6f6f6;
    }

    .tips {
      display: flex;
      align-items: center;
      color: #6f6f6f;
      font-size: 24rpx;
    }

    .icon-shield {
      font-size: 28rpx;
      margin-right: 5rpx;
    }
  }

  .patient-info {
    margin-top: 30rpx;

    .description {
      width: 100%;
      height: 240rpx;
      padding: 30rpx;
      border-radius: 20rpx;
      box-sizing: border-box;
      font-size: 30rpx;
      color: #121826;
      background-color: #f6f6f6;
    }

    .title {
      margin: 30rpx 0 10rpx;
      font-size: 28rpx;
      color: #3c3e42;
    }

    .tags {
      display: flex;
      flex-wrap: wrap;

      .tag {
        line-height: 1;
        padding: 16rpx 20rpx 14rpx;
        margin: 20rpx 20rpx 20rpx 0;
        font-size: 26rpx;
        border-radius: 10rpx;
        color: #3c3e42;
        border: 1rpx solid transparent;
        background-color: #f6f6f6;

        &.active {
          color: #2cb5a5;
          border-color: #2cb5a5;
          background-color: rgba(44, 181, 165, 0.1);
        }
      }
    }
  }

  .patient-picture {
    margin-top: 30rpx;

    :deep(.uni-file-picker__header) {
      padding-top: 0;
      padding-bottom: 30rpx;
    }

    :deep(.file-title) {
      font-size: 28rpx;
      color: #3c3e42;
    }

    :deep(.file-count) {
      font-size: 28rpx;
    }

    :deep(.file-picker__box-content) {
      background-color: #f6f6f6;
      border: none !important;
      border-radius: 10rpx !important;
    }

    :deep(.icon-add) {
      width: 60rpx;
      height: 4rpx;
      background-color: #ccc;
    }

    :deep(.icon-del-box) {
      right: -3px !important;
      top: -3px !important;
      background-color: rgba(0, 0, 0, 0.3) !important;
      transform: scale(0.6) rotate(-45deg) !important;
    }
  }

  .next-step {
    position: sticky;
    right: 0;
    left: 0;
    bottom: env(safe-area-inset-bottom);
    z-index: 100;
    padding: 30rpx 40rpx;
    background-color: #fff;
  }
</style>
